<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="css/mui.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="css/common.css"/>
	<link rel="stylesheet" type="text/css" href="css/detail.css"/>
</head>

<body>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">垃圾</h1>
	</header>
	<section>
		<h1>匹配结果</h1>
		<div class="detail-title" id="detail-name">
			
		</div>
		<div class="detail-list">
			<p>您可能要找到的是</p>
			<ul class="mui-table-view" id="detailList"></ul>
		</div>
	</section>
</body>
<script src="js/flexible.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.js"></script>
<script type="text/javascript">
	mui.init()
	mui.plusReady(function () {
	    // 设置状态栏样式
	     plus.navigator.setStatusBarBackground('#f7f7f7');
	     plus.navigator.setStatusBarStyle('dark');
		 // 接受参数
		 var self = plus.webview.currentWebview()
		 var title = decodeURI(self.title).replace('。','')
		 mui.ajax('http://apis.juhe.cn/rubbish/search',{
			 data:{
				 key:'dfe7a5dc90a9be32d35d15d5a06eb619',
				 q: title
			 },
			 success:function(data){
				 var result = data.result;
				 // 没有数据的情况
				 if(!result){
					 mui('#detail-name')[0].innerHTML = 
					 `<p>小编正在努力搜索资料库，请稍后查看</p>
			         <h3 >未知垃圾</h3>`;
					 return false
				 } else {
					 mui.each(result,function(index,item){
						 //如果数据和语音输入的相同
						 if(item.itemName == title){
							 mui('#detail-name')[0].innerHTML =
							 `<p>${item.itemName}为</p>
							 <h3>${item.itemCategory}</h3>`;
						 } else {
							 mui('#detailList')[0].innerHTML +=`
							 <li class="mui-table-view-cell">
							 	<a class="mui-navigate-right">
							 		<p>${item.itemName}为</p>
									<p>${item.itemCategory}</p>
							 	</a>
							 </li>
							 `
						 }
					 })
				 }
			 }
		 })
	})
</script>
</html>
